<template>
	<view class="card">
		<image class="icon" :src="'https://zm.quya.vip/storage/'+data.logo" mode="aspectFill"></image>
		<view class="flex-col gap-16 fs-26">
			<view class="title fs-32 color-131C33">
				{{data.name}}
			</view>
			<view class="desc color-586380">
				{{data.intro}}
			</view>
			<view class="options flex gap-30 color-808080">
				<view class="flex align-center gap-10">
					<image class="icon" src="../../../static/index/hot_num@2x.png" mode=""></image>
					{{data.hot_num||0}}
				</view>
				<view class="flex align-center gap-10" @click.stop="checkLogin() && tofabulous({id:data.id})">
					<image class="icon" src="../../../static/index/likes@2x.png" mode=""></image>
					{{data.likes||0}}
				</view>
			</view>
		</view>

		<view style="position: relative;">
			<by-nike-avtar ref="login"></by-nike-avtar>
		</view>
	</view>
</template>

<script>
	import {
		fabulous
	} from '../../../API/index.js';
	export default {
		props: {
			data: {
				type: Object,
				default () {
					return {
						hot_num: null,
						id: 1,
						intro: "快速生成朋友圈发布文案",
						likes: null,
						logo: "images/朋友圈.png",
						name: "朋友圈文案",
						template: "这里是实例模版",
						type: 1,
					}
				}
			},
		},
		methods: {
			async tofabulous(query) {
				let data = await fabulous(query);
				console.log(data);
				uni.showToast({
					title: data.message,
					icon: 'none'
				})
				if (data.code == 200)
					this.$emit('update:likes', this.data.likes + 1);
			}
		}
	}
</script>

<style scoped>
	.card {
		width: 690upx;
		height: 200upx;
		background-color: #deeffe;
		border-radius: 30upx;
		margin: 30upx auto;
		margin-bottom: 0;
		padding-left: 30upx;
		display: flex;
		gap: 30upx;
		align-items: center;
		box-sizing: border-box;
	}

	.card .icon {
		width: 100upx;
		height: 100upx;
		border-radius: 50upx;
		/* border: 1px solid red; */
	}

	.options .icon {
		width: 28upx;
		height: 28upx;
	}

	.card .desc {
		-webkit-box-orient: vertical;
		height: 52upx;
		width: 500upx;
		line-height: 26upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
	}




	/* ---------- */
	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-1 {
		flex: 1;
	}

	.align-center {
		align-items: center;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.gap-30 {
		gap: 30upx;
	}

	.gap-16 {
		gap: 16upx;
	}

	.gap-10 {
		gap: 10upx;
	}

	.fs-26 {
		font-size: 26upx;
		line-height: 26upx;
	}

	.fs-32 {
		font-size: 32upx;
		line-height: 32upx;
	}

	.color-131C33 {
		color: #131C33;
	}

	.color-586380 {
		color: #586380;
	}

	.color-808080 {
		color: #808080;
	}
</style>